
import { useNavigate } from 'react-router-dom';
import { BallsAddedInCart } from '../../components/ballsAddedInCart/ballsAddedInCart';
import Button from '../../components/button/button';
import { useAppSelector } from '../../store/hooks';
import styles from './cart.module.scss';

export const Cart = () => {
	const {balls} = useAppSelector(state => state.cart);
	const navigate = useNavigate();
	return (
		<div className={styles.container}>
			{balls.length === 0 ? 
				<div style={{textAlign: 'center'}}>
					<h2 style={{marginBottom: '20px'}}>Корзина пуста</h2>
					<Button onClick={() => navigate('/')}>К покупкам!</Button>
				</div>
				: 
				<>
					{balls.map(item => <BallsAddedInCart key={item.id} balls={item}/>)}
					<div className={styles.total}>Блок стоимости общей цены</div>
				</>
			}
			
		</div>
	);
};